<template>
  <div class="task" ref="taskEchart"></div>
</template>

<script>
import * as echarts from "echarts";
import { getTarskData } from "api/interface";
export default {
  name: "Task",
  mounted() {
    this.$nextTick(function () {
      /* 任务图表 */
      let option = {
        tooltip: {
          trigger: "item",
          show: true,
        },
        legend: {
          top: "bottom",
          left: "right",
          orient: "vertical", //排列方式垂直
        },
        color: ["#2DB5A1", "#EA430C", "#f97d1c"],
        series: [],
      };
      // 任务概览
      let generalCharts = echarts.init(this.$refs.taskEchart); //传递一个dom元素
      //传入配置项
      generalCharts.setOption(option);
      this.$emit("resize", generalCharts);
      //发送异步请求获取数据
      getTarskData().then((res) => {
        let data = res.data.data;
        let series = {
          name: "bug修复进度",
          type: "pie",
          radius: ["50%", "70%"], //半径
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center", //让数据提示在圆环中间
            formatter: "{d}%",
            textStyle: {
              fontSize: "20",
              fontWeight: "bolder",
            },
          },
          emphasis: {
            //强调 鼠标移入到饼图上会对该数据进行强调
            label: {
              show: false,
              fontSize: "15",
              fontWeight: "bold",
              color: "red",
            },
          },
          itemStyle: {
            borderRadius: "5",
          },
          data,
        };
        generalCharts.setOption({
          series,
        });
      });
    });
  },
};
</script>

<style scoped>
.task {
  height: 100%;
  width: 100%;
}
</style>